import { useRef } from 'react';
import { FooterToolbar, ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { Button, message, Space } from 'antd';
import { history } from 'umi';
import { PageContainer } from '@ant-design/pro-components';
import { productkeyDetail, productkeyEdit } from '@/services/profile';
import { activatecodeDetail, activatecodeEdit } from '@/services/sensitizeManage';
import useDetailType from '@/hooks/useDetailType';
import StorageManager from '@/utils/StorageManager';
import AddObjectBtn from '../../components/keyInfo/addObjectBtn';

import type { ProFormInstance } from '@ant-design/pro-components';

interface IParams {
  type?: string;
  id?: string;
}

import styles from './style.less';

const defaultValues = {
  productKeyName: '',
  brandId: '001',
  productId: '',
  productIdEx: '',
  productIdRule: '',
  productIdRuleEx: '',
  productIdBackup: '',
  productIdBackupEx: '',
};

const SensitizeManageDetail: React.FC = () => {
  const { isAdd, isModify, params } = useDetailType<IParams>();
  const formRef = useRef<ProFormInstance>();
  const eunmList: any = StorageManager.getLocalStorageSync('eunmList');

  // 新增或者编辑  表单内容-初始化
  const getDetail = async () => {
    if (params.id && isModify) {
      // 编辑
      const { code, data } = await productkeyDetail({
        id: params.id,
      });
      if (code === 200 && data) {
        return {
          ...data,
        };
      }
    }
    return { ...defaultValues };
  };

  const goToList = () => {
    history.push('/profile/productkey');
  };

  const restProForm = () => {
    formRef.current?.setFieldsValue({
      ...defaultValues,
    });
  };
  const onValueChange = (value: any) => {
    console.log(value, 'onValueChange');
  };

  const onFinish = async (value: Partial<API.ProductkeyEditInfo>) => {
    console.log('onFinish---value', isAdd, isModify, value);
    // @ts-ignore
    const param: API.ProductkeyEditInfo = {
      ...value,
    };
    if (isModify) {
      param.id = params.id;
    }
    // id: params.id,
    const { data, code } = await productkeyEdit(param);
    if (code === 200 && data) {
      message.success('保存成功');
      goToList();
    }
  };

  return (
    <PageContainer>
      <div className={styles['detail-body']}>
        <>
          <ProForm<Partial<API.ProductkeyListItem>>
            formRef={formRef}
            layout="horizontal"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            scrollToFirstError
            onValuesChange={onValueChange}
            //@ts-ignore
            onFinish={onFinish}
            request={getDetail}
            submitter={{
              searchConfig: {
                resetText: '返回',
              },
              render: (_, dom) => (
                <FooterToolbar
                  extra={
                    <div style={{ textAlign: 'center', padding: '5px 0' }}>
                      <Space>
                        <Button type="primary" onClick={restProForm}>
                          重置
                        </Button>
                        <Button onClick={goToList}>返回</Button>
                        {dom[1]}
                      </Space>
                    </div>
                  }
                />
              ),
            }}
          >
            <>
              <ProForm.Group>
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="productKeyName"
                  label="键位模版名称"
                  rules={[{ required: true, message: '不得为空' }]}
                  placeholder="productKeyName"
                />
                <ProFormSelect
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="brandId"
                  label="品牌ID"
                  placeholder=""
                  rules={[{ required: true, message: '请选择品牌ID' }]}
                  options={eunmList?.OptionsPlaceBrandList}
                />
              </ProForm.Group>

              <ProForm.Group>
                <ProFormText
                  labelCol={{ span: 8 }}
                  width={700}
                  name="productId"
                  label="产品ID"
                  placeholder="productId"
                />
                <AddObjectBtn
                  formRef={formRef}
                  fatherName="productIdEx"
                  fatherLabel="产品ID扩展属性"
                  widfix={true}
                />
                <ProFormText
                  labelCol={{ span: 8 }}
                  width={700}
                  name="productIdRule"
                  label="产品规则ID"
                  placeholder="productIdRule"
                />
                <AddObjectBtn
                  formRef={formRef}
                  fatherName="productIdRuleEx"
                  fatherLabel="产品规则ID扩展属性"
                  widfix={true}
                />
                <ProFormText
                  labelCol={{ span: 8 }}
                  width={700}
                  name="productIdBackup"
                  label="后备产品码"
                  placeholder="productIdBackup"
                />
                <AddObjectBtn
                  formRef={formRef}
                  fatherName="productIdBackupEx"
                  fatherLabel="后备产品码扩展属性"
                  widfix={true}
                />
              </ProForm.Group>
            </>
          </ProForm>
        </>
      </div>
    </PageContainer>
  );
};

export default SensitizeManageDetail;
